<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动态创建节点</title>
<style type="text/css">
   .testitem{
	    background:yellow;
	   }
</style>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
     $(function () {
            //动态创建节点并添加
            var link = $("<a href='http://www.baidu.com'>百度</a>");
            $("div:first").append(link);


        });
        //以下是动态生成的table中的行和列:动态加载网站列表
        $(function () {
            var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com" };
            $.each(data, function (key, value) {
                //创建新的行对象
                var tr = $("<tr><td>" + key + "</td><td><a href='" + value + "'>" + value + "</a></td></tr>");
                $("#tb1").append(tr);

            });
        });
        //动态删除li的testitem样式
        $(function () {
            $("#removeUL").click(function () {
                $("ul li").removeClass('testitem');//移除样式
            });
        });
</script>
</head>

<body>
<div></div>
<table id="tb1" border="1">

</table>
<ul>
 <li class="testitem">abcd</li>
  <li>abcd</li>
   <li class="testitem">abcd</li>
   <li>abcd</li>
</ul>
<input  type="button" value="删除ul中的一部分" id="removeUL"/>
</body>
</html>
